<template>
  <view class="bg-gray-50 w-[750rpx] min-h-screen box-border">
    <!-- Header -->
    <PageHeader title="提现到微信" :showBack="true"/>
    <!-- <view class="bg-white h-[88rpx] flex items-center justify-between px-[30rpx] border-b border-gray-100 fixed top-0 left-0 right-0 z-100">
      <IconFont name="arrow-left" class="text-[30rpx] text-gray-800" @click="handleBack" />
      <text class="text-[34rpx] font-medium text-gray-800">提现到微信</text>
      <view></view>
    </view> -->

    <view class="pt-[30rpx] px-[20rpx] pb-[30rpx]">
      <!-- 余额卡片 -->
      <view class="bg-white rounded-[12rpx] p-[30rpx] mb-[20rpx] shadow-sm">
        <text class="text-[28rpx] text-gray-600 mb-[20rpx] block">可提现余额</text>
        <text class="text-[48rpx] font-bold text-orange-500 block">¥ {{userStore.userInfo.balance || 0}}</text>
        <!-- <text class="text-[24rpx] text-gray-500 mt-[10rpx] block">温馨提示：普通会员提现将扣除15%信息服务费</text> -->
      </view>

      <!-- 提现金额 -->
      <view class="bg-white rounded-[12rpx] p-[20rpx] mb-[20rpx] shadow-sm">
        <text class="text-[30rpx] font-medium mb-[20rpx] block">提现金额</text>

        <view class="mb-[20rpx]">
          <text class="text-[28rpx] text-gray-600 mb-[10rpx] block">请输入提现金额</text>
          <input
              v-model="withdrawAmount"
              type="digit"
              class="w-full box-border flex items-center h-[88rpx] border border-gray-300 rounded-[8rpx] px-[20rpx] text-[32rpx] text-gray-800 bg-gray-50"
              placeholder="请输入金额"
              maxlength="11"
              @input="calculateFee"
          />
        </view>
        <view class="mb-[20rpx]">
          <text class="text-[28rpx] text-gray-600 mb-[10rpx] block">请输入真实姓名</text>
          <input
              v-model="realName"
              type="text"
              class="w-full box-border flex items-center h-[88rpx] border border-gray-300 rounded-[8rpx] px-[20rpx] text-[32rpx] text-gray-800 bg-gray-50"
              placeholder="请输入姓名"
              maxlength="11"
          />
        </view>

        <!-- <view class="flex justify-between items-center bg-yellow-50 px-[20rpx] py-[20rpx] rounded-[8rpx] mb-[20rpx]">
          <text class="text-[28rpx] text-orange-600">预计到账金额：</text>
          <text class="text-[28rpx] text-red-500 font-bold">¥ {{ actualAmount }}</text>
        </view>
        
        <view class="flex justify-between items-center bg-yellow-50 px-[20rpx] py-[20rpx] rounded-[8rpx]">
          <text class="text-[28rpx] text-orange-600">提现服务费：</text>
          <text class="text-[28rpx] text-red-500 font-bold">¥ {{ serviceFee }}</text>
        </view> -->
      </view>

      <!-- 提现方式 -->
      <view class="bg-white rounded-[12rpx] p-[20rpx] mb-[20rpx] shadow-sm">
        <text class="text-[30rpx] font-medium mb-[20rpx] block">提现方式</text>

        <view class="flex items-center bg-gray-50 px-[20rpx] py-[20rpx] rounded-[8rpx]">
          <view
              class="w-[60rpx] h-[60rpx] bg-green-500 rounded-full flex items-center justify-center mr-[20rpx] text-white text-[30rpx]">
            微
          </view>
          <view class="flex-1">
            <text class="text-[30rpx] font-medium block">微信收款</text>
          </view>
          <text class="text-green-500 text-[28rpx]">已绑定</text>
        </view>
      </view>

      <!-- 提现按钮 -->
      <nut-button
          type="primary"
          size="large"
          class="w-full h-[88rpx] text-[32rpx] font-medium bg-green-500"
          @click="handleWithdraw"
      >
        确认提现
      </nut-button>

      <!-- 提现须知 -->
      <view class="mt-[20rpx] p-[20rpx] bg-gray-100 rounded-[8rpx] text-[24rpx] text-gray-600 leading-[1.5]">
        <text class="text-red-500 font-medium block mb-[10rpx]">提现须知：</text>
        <view class="mb-[8rpx]">1. 最低提现金额：100元</view>
        <view class="mb-[8rpx]">2. 普通会员单月提现限额1.5万元，SVIP会员单月提现限额15万元</view>
        <view class="mb-[8rpx]">3. 提现到账时间：工作日9:00-17:00申请，预计2小时内到账；其他时间申请，预计次日到账</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'
import Taro from '@tarojs/taro'
import PageHeader from '@/components/PageHeader.vue'
import {post} from "@/utils/request";
import {useUserStore} from "@/store/user";
import {storeToRefs} from "pinia";

const userStore = useUserStore();
const {userInfo,locationObj} = storeToRefs(userStore);

console.log("userInfo",userInfo.value, userStore)

// 提现金额
const withdrawAmount = ref('')
//真实姓名
const realName = ref('')

// 计算服务费（普通会员15%）
const serviceFee = computed(() => {
  const amount = parseFloat(withdrawAmount.value) || 0
  return (amount * 0.15).toFixed(2)
})

// 计算实际到账金额
const actualAmount = computed(() => {
  const amount = parseFloat(withdrawAmount.value) || 0
  const fee = parseFloat(serviceFee.value)
  return (amount - fee).toFixed(2)
})

// 计算手续费
const calculateFee = () => {
  // 触发计算，computed会自动更新
}

// 返回
const handleBack = () => {
  Taro.navigateBack()
}

// 提现
const handleWithdraw = () => {
  const amount = parseFloat(withdrawAmount.value)
  console.log("amount",amount)
  post('/my/withdraw', {"amount": amount,"userNmae":realName.value}).then(res => {
    if (res.code == 0) {
      Taro.showToast({
        title: '提现申请已提交，预计2小时内到账',
        icon: 'success',
        duration: 3000
      })
    }
    else if(res.code == -1){
      Taro.showToast({title: res.data, icon: 'success', duration: 3000})
    }
  })

  if (!amount) {
    Taro.showToast({
      title: '请输入提现金额',
      icon: 'none'
    })
    return
  }

  // if (amount < 100) {
  //   Taro.showToast({
  //     title: '最低提现金额为100元',
  //     icon: 'none'
  //   })
  //   return
  // }

  if (amount > 2580) {
    Taro.showToast({
      title: '提现金额不能超过可用余额',
      icon: 'none'
    })
    return
  }

  withdrawAmount.value = ''
}
</script>